import request from "../../utils/request"
// pages/video/video.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 菜单列表数据
    navList:[],
    // 给菜单列表数据设置一个currentIndex属性,值为id,来控制active属性
    currentIndex:"",
    // 视频列表数据
    videoList:[],
    // 
    currentId:"",
    // 视频内容的历史数据局
    videoPlayHistoryData:[]
  },

  // 5.通过视频播放的历史数据,进行视频播放跳转
  // seekHistoryVideo 跳转到指定的视频 上次播放的位子
  seekHistoryVideo(id){
    // 1、获取当前点击的id
    // 2、获取历史数据 是否 有对应的id数据
    const obj = this.data.videoPlayHistoryData.find(item => item.id === id)
    if(obj){
      this.player.seek(obj.currentTime)
    }
    // 3、如果有 接着上一次位子播放 videoContext.seek(时间)
  },

  // 6.时间节点的回调函数
  getVideoTime(event){
    // 1、获取 当前播放的时间节点 event.detail.currentTime
    const currentTime = event.detail.currentTime
    // 2、获取 video id
    const id = event.target.id;
    // 3、整理好的单个对象 {id,currentTime}  每间隔250ms
    let  currentTimeObj = {
      id,
      currentTime,
    }
    // 4、通过id  去找到历史数据 是否有 
    const videoPlayHistoryData = this.data.videoPlayHistoryData
    const obj = videoPlayHistoryData.find(item => item.id === id)
    console.log('去找到历史数据 是否有',obj)
    //  进行判断,有就直接修改 没有就给他新增
    if(obj){
      obj.currentTime = currentTime
    } else {
      videoPlayHistoryData.push(currentTimeObj)
    }
    // 5、把更新一下历史数据结构
    this.setData({
      videoPlayHistoryData
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    await this.getnavList()
    await this.getVideoList()
  },

  // 1.发请求获取video列表数据
  async getnavList(){
    const re = await request("/video/group/list",{},"GET")
    // console.log(re);
    // 设置data中的navList
    this.setData({
      navList: re.data.slice(0,20)
    })
    // 将请求回来的菜单列表数据的第一个设置为默认
    this.setData({
      currentIndex: re.data.slice(0,20)[0].id
    })
  },
  // 2.点击菜单列表数据时,通过事件对象,将点击项的id设置给currentIndex
  // 在回调事件中 通过event.currentTarget.dataset方法拿到数据
  handleFn(e){
    this.setData({
      currentIndex:e.currentTarget.dataset.id
    })
    // 点击菜单列表数据的时候,再次发起视频列表数据请求
    this.getVideoList()
  },
  // 3.获取视频列表数据
  async getVideoList(){
    const re = await request("/video/group",{id:this.data.currentIndex},"GET")
    console.log(re,">>>>>>>");
    // 将请求回来的数据中的视频数据,设置给data中的videoList,并渲染到页面上
    this.setData({
      videoList:re.datas.map((item)=>{
        return item.data
      })
    })
  },

  // 4.点击视频的相关设置
  clickVideo(event){
    // 1.获取当前点击 视频组件的 id
    const id = event.target.id
    // 2.this.player 保证全局只有一个 播放的实例
    // 要先判断 当前的视频是否存在
    if(this.player){
      // 再次判断,如果当前点击的id 和 上一个id 不一样 才进去
      if(this.currentId !== id){
      // 3.如果有 就暂停上一个视频
      this.player.pause();
      // 4.创建新的 视频实例this.player赋值  在进行播放
      // 覆盖上一次的 视频实例
      this.player = wx.createVideoContext(id);
      // 5.跳转到 历史记录页面
      this.seekHistoryVideo(id);
      this.player.play();
      // 6.保存当前播放的id
      this.setData({
        currentId:id
      })
    }}else{  // 如果不存在就是首次进入
      // 7.首次进入
      // 创建新的 视频实例 给this.player赋值
      this.player = wx.createVideoContext(id);
      this.player.play();
      // 8.保存当前播放的id
      this.setData({
        currentId:id
      })
    }
    // 9.创建一个 video 视频实例的对象 
    const player = wx.createVideoContext(id)
    player.play();
    this.player = player
    console.log('处理点击视频操作',event)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})